
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Resident</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet"
	href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.min.css" />
<link rel="stylesheet" href="css/demo_table.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/quickforms.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(function(){
	getResultSet('rpp','getAdultDomainsReport','',function(data){
		if(isJSONString(data))
        {
			var json = JSON.parse(data);			
			var oTable = $('#mainData').dataTable( {	
				"fnDrawCallback": function( oSettings ) {
	                   if ( oSettings.aiDisplay.length == 0 )
	                   {
	                       return;
	                   }
	                   // retrieve all tr
	                   var nTrs = $('#mainData tbody tr');
	                   var iColspan = nTrs[0].getElementsByTagName('td').length;
	                   // define variable of last visited record
	                   var last = "";
	                   var current = "";
	                   
	                   for ( var i=0 ; i<nTrs.length ; i++ )
	                   {
	                		// get column header
                           var colHeader = oSettings.aoColumns[0].mData;
                           var iDisplayIndex = oSettings._iDisplayStart + i;
                           var rowspan = 1;
                           
                       		// define current record of the column
                       		current = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[colHeader];
                                                  		
                       		// check next rows if they are the same as current rows
                       		for ( var j = i + 1; j<nTrs.length; j++) {                     				
                       				iDisplayIndex = oSettings._iDisplayStart + j;
                       				// define next record
                       				var next = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[colHeader];
                       				// check if next row is the same as current row, if they are, increase rowspan and remove 1st td
                       				if ( next == current ) {
                       					rowspan++;
                       					//(nTrs[j].getElementsByTagName('td')[0]).remove();
                       					nTrs[j].deleteCell(0);
                       				} else {
                       					// if they are not the same
                       					last = current;                      					
                       					break;
                       				}
                       			}
                       		
                       		// set rowspan
                       		
                       			//nTrs[i].getElementsByTagName('td')[0].attr('rowspan',rowspan);
                       			var cell = nTrs[i].cells[0];
                       			cell.rowSpan = rowspan;
                       		
                       		
                       		// jump to the next category                       		
                       		i = j-1;  // use j - 1 here is bacause i will do ++ after this line
	                  	}              	
	                   // apply class   .addClass("red")
	                   $('#mainData tbody td[rowspan]:odd').css("background-color","#E4E4E4") ;
	                   $('#mainData tbody td[rowspan]:even').css("background-color","#eeffee");
	           		},	         
	           		"bProcessing": true,
	           	"aaData": json,
	           	"aoColumns": [
	               { "sTitle": "Adult Domains", "mData":"Adult Domain","sWidth": "30%", "bSortable": false  },
	               { "sTitle": "Diagnosis", "mData":"Diagnosis","sWidth": "60%", "bSortable": false },
	               { "sTitle": "# of Visits", "mData":"# of Visits", "sWidth": "10%","sClass": "center", "bSortable": false }
	           	],
	           	"sDom":""
	       });
	
        } else
 		{
			$('#mainData').remove();
            alertJSONError(data);
        }
	});
});



</script>
</head>


<body>

	<!-- Start of Page -->

	<!-- Page Header -->
	<div data-role="page">

		<div data-role="header" data-position="inline" data-theme="a">
			<h1 id="header">Resident Dashboard -</h1>
			<a href="logout.jsp" rel="external" data-role="button"
				data-inline="true" data-theme="c" class="ui-btn-right">Logout</a>
		</div>
		<!-- /header -->
		<div data-role="content" data-inset="true">

			<!--<form action="" method="POST"> action will tell the form what code to run when the submit button is pressed. Now it just redirects to the portal -->
			<div data-role="navbar">
				<ul>
					<li><a href="Visits.html" rel="external">Visits</a></li>
					<li><a href="table.html" rel="external"
						class="ui-btn-active ui-state-persist">Reports</a></li>
					<li><a href="Notes.html" rel="external">Notes</a></li>
					<li><a href="teams.html" rel="external">Team</a></li>
				</ul>
			</div>
			<!-- /navbar -->
			<!--</form> -->
			<div data-role="content">
				<div data-role="collapsible" data-theme="b" data-content-theme="c">
					<h2>Choose a Report...</h2>
					<ul data-role="listview">
						<li><a href="Reports.html" rel="external">Age/Gender
								Report</a></li>
						<li><a href="Reports1.html" rel="external">Clinical
								Domain Report</a></li>
						<li><a href="Reports2.html" rel="external">Adult Domains
								Report</a></li>
						<li><a href="Reports2.html" rel="external">Children
								Domains Report</a></li>
						<li><a href="Reports1.html" rel="external">Procedure
								Report</a></li>
						<li><a href="table.html" rel="external">Adult Domains
								Table</a></li>
					</ul>
				</div>

				<label for="time" class="select">Choose a Time Frame:</label> <select
					name="time" id="time" data-native-menu="false" data-theme="b">
					<option value="Not">-- Not Selected --</option>
					<option value="everything" selected="true">Everything</option>
					<option value="Block 1">Block 1</option>
					<option value="Block 2">Block 2</option>
					<option value="Block 3">Block 3</option>
					<option value="weekly">Current week</option>
				</select> <br>

				<!-- Page Content -->
				<div class="content-primary" data-theme="d">

					<table border="1">
						<tr>
							<td><b>Adult Domains</b></td>
							<td><b>Diagnosis</b></td>
							<td><b># of Visits</b></td>

						</tr>
						<tr>
							<td rowspan="2">Prevention</td>
							<td>Colon cancer screening</td>
							<td>2</td>
						</tr>
						<tr>
							<td>Prostate cancer screening</td>
							<td>1</td>
						</tr>
						<tr>
							<td rowspan="3">Social Issue</td>
							<td>Domestic violence</td>
							<td>3</td>
						</tr>
						<tr>
							<td>Grief</td>
							<td>1</td>
						</tr>
						<tr>
							<td>Psychsocial crisis</td>
							<td>4</td>
						</tr>
						<tr>
							<td rowspan="3">Cancer</td>
							<td>Cancer pain management</td>
							<td>1</td>
						</tr>
						<tr>
							<td>Post-cancer surveillance</td>
							<td>2</td>
						</tr>
						<tr>
							<td>Providing cancer diagnosis</td>
							<td>1</td>
						</tr>
						<tr>
							<td>Urgent and Emergent conditions</td>
							<td>Acute Coronary Syndrome</td>
							<td>3</td>
						</tr>
					</table>


					<table id="mainData" class="display">

					</table>
				</div>
			</div>
			<!-- /content -->

			<!-- Page Footer -->
			<div data-role="footer">
				<h4></h4>
			</div>
			<!-- /footer -->

		</div>
</body>
</html>
